<template>
  <view class="container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view 
        class="filter-item" 
        :class="{active: currentStatus === 'all'}"
        @tap="switchStatus('all')"
      >
        全部
      </view>
      <view 
        class="filter-item" 
        :class="{active: currentStatus === 'success'}"
        @tap="switchStatus('success')"
      >
        提现成功
      </view>
      <view 
        class="filter-item" 
        :class="{active: currentStatus === 'pending'}"
        @tap="switchStatus('pending')"
      >
        处理中
      </view>
      <view 
        class="filter-item" 
        :class="{active: currentStatus === 'failed'}"
        @tap="switchStatus('failed')"
      >
        提现失败
      </view>
    </view>

    <!-- 记录列表 -->
    <view class="record-list">
      <view class="record-item" v-for="(item, index) in filteredRecords" :key="index">
        <view class="record-header">
          <text class="order-no">订单号：{{item.orderNo}}</text>
          <text class="status" :class="item.status">{{item.statusText}}</text>
        </view>
        <view class="record-content">
          <view class="amount-info">
            <text class="amount">¥{{item.amount}}</text>
            <text class="fee">手续费：¥{{item.fee}}</text>
          </view>
          <view class="detail-info">
            <view class="info-item">
              <text class="label">提现方式</text>
              <text class="value">{{item.method}}</text>
            </view>
            <view class="info-item">
              <text class="label">申请时间</text>
              <text class="value">{{item.applyTime}}</text>
            </view>
            <view class="info-item" v-if="item.completeTime">
              <text class="label">完成时间</text>
              <text class="value">{{item.completeTime}}</text>
            </view>
            <view class="info-item" v-if="item.failReason">
              <text class="label">失败原因</text>
              <text class="value error">{{item.failReason}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <uni-load-more :status="loadMoreStatus"></uni-load-more>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredRecords.length === 0">
      <image src="/static/images/empty.png" mode="aspectFit"></image>
      <text>暂无提现记录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStatus: 'all',
      loadMoreStatus: 'more',
      records: [
        {
          orderNo: 'W202403150001',
          amount: 1000.00,
          fee: 5.00,
          status: 'success',
          statusText: '提现成功',
          method: '支付宝',
          applyTime: '2024-03-15 14:30',
          completeTime: '2024-03-15 14:35'
        },
        {
          orderNo: 'W202403140001',
          amount: 2000.00,
          fee: 10.00,
          status: 'pending',
          statusText: '处理中',
          method: '微信',
          applyTime: '2024-03-14 10:20'
        },
        {
          orderNo: 'W202403130001',
          amount: 1500.00,
          fee: 7.50,
          status: 'failed',
          statusText: '提现失败',
          method: '银行卡',
          applyTime: '2024-03-13 16:45',
          failReason: '银行卡号错误'
        },
        {
          orderNo: 'W202403120001',
          amount: 3000.00,
          fee: 15.00,
          status: 'success',
          statusText: '提现成功',
          method: '支付宝',
          applyTime: '2024-03-12 09:15',
          completeTime: '2024-03-12 09:20'
        }
      ]
    }
  },
  computed: {
    filteredRecords() {
      if (this.currentStatus === 'all') {
        return this.records
      }
      return this.records.filter(item => item.status === this.currentStatus)
    }
  },
  onLoad() {
    this.loadData()
  },
  onReachBottom() {
    if (this.loadMoreStatus === 'more') {
      this.loadMore()
    }
  },
  methods: {
    switchStatus(status) {
      this.currentStatus = status
      this.loadData()
    },
    loadData() {
      // TODO: 加载数据
      this.loadMoreStatus = 'more'
    },
    loadMore() {
      if (this.loadMoreStatus === 'more') {
        this.loadMoreStatus = 'loading'
        // TODO: 加载更多数据
        setTimeout(() => {
          this.loadMoreStatus = 'noMore'
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  position: sticky;
  top: 0;
  z-index: 1;
  
  .filter-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 0;
    position: relative;
    
    &.active {
      color: #1890ff;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #1890ff;
        border-radius: 2rpx;
      }
    }
  }
}

.record-list {
  padding: 20rpx;
  
  .record-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .order-no {
        font-size: 24rpx;
        color: #999;
      }
      
      .status {
        font-size: 24rpx;
        
        &.success {
          color: #52c41a;
        }
        
        &.pending {
          color: #faad14;
        }
        
        &.failed {
          color: #f5222d;
        }
      }
    }
    
    .record-content {
      padding: 20rpx;
      
      .amount-info {
        margin-bottom: 20rpx;
        
        .amount {
          font-size: 40rpx;
          font-weight: bold;
          margin-right: 20rpx;
        }
        
        .fee {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .detail-info {
        .info-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .label {
            font-size: 24rpx;
            color: #999;
          }
          
          .value {
            font-size: 24rpx;
            color: #333;
            
            &.error {
              color: #f5222d;
            }
          }
        }
      }
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 